<template>
  <div>
    <tab-bar>
      <!-- 为每一个item设置path和activitycolor属性值 这些属性会动态传入在对应组件中进行运用 -->
      <tab-bar-item path="/home" activitycolor="purple">
        <img slot="item-icon" src="~assets/img/tabbar/home.png" alt="" />
        <img
          slot="item-icon-active"
          src="~assets/img/tabbar/home1.png"
          alt=""
        />
        <div slot="item-text">首页</div>
      </tab-bar-item>
      <tab-bar-item path="/categroy" activitycolor="blue">
        <img slot="item-icon" src="~assets/img/tabbar/category.png" alt="" />
        <img
          slot="item-icon-active"
          src="~assets/img/tabbar/category1.png"
          alt=""
        />
        <div slot="item-text">分类</div>
      </tab-bar-item>
      <tab-bar-item path="/cart" activitycolor="red">
        <img slot="item-icon" src="~assets/img/tabbar/car.png" alt="" />
        <img slot="item-icon-active" src="~assets/img/tabbar/car1.png" alt="" />
        <div slot="item-text">购物车</div>
      </tab-bar-item>
      <tab-bar-item path="/my" activitycolor="deepPink">
        <img slot="item-icon" src="~assets/img/tabbar/my.png" alt="" />
        <img slot="item-icon-active" src="~assets/img/tabbar/my1.png" alt="" />
        <div slot="item-text">我的</div>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>
<script>
import tabBar from "components/common/tabbar/tabbar.vue";
import tabBarItem from "components/common/tabbar/tabbar-item.vue";

export default {
  components: {
    tabBar,
    tabBarItem,
  },
};
</script>

<style>
@import url("~assets/css/base.css");
</style>
